<template>
	<view class="comment-list-page">
		<view class="header">
			<view class="back-btn" @click="goBack">
				<u-icon name="arrow-left" size="24"></u-icon>
			</view>
			<text class="title">全部评价 ({{ total }})</text>
		</view>
		
		<view class="content">
			<view class="comment-list" v-if="comments.length > 0">
				<view v-for="comment in comments" :key="comment.id" class="comment-item">
					<view class="comment-header">
						<image :src="comment.userAvatar || defaultAvatar" class="user-avatar"></image>
						<view class="user-info">
							<text class="user-name">{{ comment.userName }}</text>
							<view class="comment-rate">
								<u-rate :value="comment.rate" :size="12" :disabled="true" active-color="#FFB400"></u-rate>
							</view>
						</view>
						<text class="comment-time">{{ formatTime(comment.createTime) }}</text>
					</view>
					<view class="comment-content">
						<text class="content-text">{{ comment.content }}</text>
					</view>
					<view class="comment-images" v-if="comment.images">
						<image 
							v-for="(img, index) in comment.images.split(',')" 
							:key="index" 
							:src="img" 
							class="comment-image"
							@click="previewImage(comment.images.split(','), index)"
						></image>
					</view>
					
					<!-- 回复列表 -->
					<view class="reply-list" v-if="comment.replies && comment.replies.length > 0">
						<view v-for="reply in comment.replies" :key="reply.id" class="reply-item">
							<text class="reply-author">{{ reply.userName }}：</text>
							<text class="reply-content">{{ reply.content }}</text>
						</view>
					</view>
					
					<view class="comment-actions">
						<view class="action-item" @click="likeComment(comment)">
							<u-icon :name="comment.isLiked ? 'thumb-up-fill' : 'thumb-up'" :color="comment.isLiked ? '#1890FF' : '#999'" size="16"></u-icon>
							<text class="action-text">{{ comment.likeCount || '赞' }}</text>
						</view>
						<view class="action-item" @click="replyComment(comment)">
							<u-icon name="chat" color="#999" size="16"></u-icon>
							<text class="action-text">回复</text>
						</view>
						<view class="action-item" v-if="comment.userId === userId" @click="deleteComment(comment)">
							<u-icon name="trash" color="#FF4D4F" size="16"></u-icon>
							<text class="action-text" style="color: #FF4D4F;">删除</text>
						</view>
					</view>
				</view>
			</view>
			<view class="empty-comment" v-else>
				<text>暂无评论</text>
			</view>
		</view>
		
		<!-- 回复输入框 -->
		<view class="reply-input-bar" v-if="showReplyInput">
			<input 
				v-model="replyContent" 
				class="reply-input" 
				:placeholder="replyPlaceholder"
				:adjust-position="true"
				@confirm="submitReply"
			/>
			<button class="send-btn" @click="submitReply">发送</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scenicId: null,
			comments: [],
			total: 0,
			userId: null,
			defaultAvatar: '/static/images/default-avatar.png',
			showReplyInput: false,
			replyContent: '',
			replyPlaceholder: '回复评论',
			currentReplyComment: null
		};
	},
	
	onLoad(options) {
		if (options.scenicId) {
			this.scenicId = options.scenicId;
		}
		
		// 获取用户ID
		const userInfo = uni.getStorageSync('userInfo') || uni.getStorageSync('user');
		if (userInfo && userInfo.id) {
			this.userId = userInfo.id;
		}
		
		this.loadComments();
	},
	
	methods: {
		async loadComments() {
			try {
				const res = await this.$api.getComments({
					targetType: 1,
					targetId: this.scenicId,
					pageNum: 1,
					pageSize: 100
				});
				
				if (res.data && res.data.code === 200) {
					this.comments = res.data.data.list || [];
					this.total = res.data.data.total || 0;
				}
			} catch (error) {
				console.error('加载评论失败', error);
			}
		},
		
		formatTime(time) {
			if (!time) return '';
			
			const now = new Date();
			const commentTime = new Date(time);
			const diff = now - commentTime;
			
			const minutes = Math.floor(diff / 60000);
			const hours = Math.floor(diff / 3600000);
			const days = Math.floor(diff / 86400000);
			
			if (minutes < 1) return '刚刚';
			if (minutes < 60) return `${minutes}分钟前`;
			if (hours < 24) return `${hours}小时前`;
			if (days < 7) return `${days}天前`;
			
			return commentTime.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' });
		},
		
		previewImage(images, index) {
			uni.previewImage({
				current: index,
				urls: images
			});
		},
		
		async likeComment(comment) {
			if (!this.userId) {
				uni.showToast({ title: '请先登录', icon: 'none' });
				return;
			}
			
			try {
				if (comment.isLiked) {
					await this.$api.unlikeComment({
						userId: this.userId,
						commentId: comment.id
					});
					comment.likeCount = Math.max(0, (comment.likeCount || 0) - 1);
					comment.isLiked = false;
				} else {
					await this.$api.likeComment({
						userId: this.userId,
						commentId: comment.id
					});
					comment.likeCount = (comment.likeCount || 0) + 1;
					comment.isLiked = true;
				}
			} catch (error) {
				console.error('点赞失败', error);
			}
		},
		
		replyComment(comment) {
			if (!this.userId) {
				uni.showToast({ title: '请先登录', icon: 'none' });
				return;
			}
			
			this.currentReplyComment = comment;
			this.replyPlaceholder = `回复 ${comment.userName}`;
			this.showReplyInput = true;
		},
		
		async submitReply() {
			if (!this.replyContent.trim()) {
				uni.showToast({ title: '请输入回复内容', icon: 'none' });
				return;
			}
			
			try {
				const res = await this.$api.addComment({
					userId: this.userId,
					targetType: 1,
					targetId: this.scenicId,
					content: this.replyContent,
					parentId: this.currentReplyComment.id,
					rate: 0
				});
				
				if (res.data && res.data.code === 200) {
					uni.showToast({ title: '回复成功', icon: 'success' });
					this.replyContent = '';
					this.showReplyInput = false;
					this.currentReplyComment = null;
					// 重新加载评论
					this.loadComments();
				}
			} catch (error) {
				console.error('回复失败', error);
				uni.showToast({ title: '回复失败', icon: 'none' });
			}
		},
		
		async deleteComment(comment) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这条评论吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							await this.$api.deleteComment({
								userId: this.userId,
								commentId: comment.id
							});
							
							uni.showToast({ title: '删除成功', icon: 'success' });
							this.loadComments();
						} catch (error) {
							console.error('删除失败', error);
							uni.showToast({ title: '删除失败', icon: 'none' });
						}
					}
				}
			});
		},
		
		goBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.comment-list-page {
	min-height: 100vh;
	background: #F5F5F5;
	
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 44px;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 16px;
		z-index: 100;
		border-bottom: 1px solid #EEEEEE;
		
		.back-btn {
			width: 44px;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: -16px;
		}
		
		.title {
			flex: 1;
			text-align: center;
			font-size: 17px;
			font-weight: 500;
			color: #333;
			margin-right: 44px;
		}
	}
	
	.content {
		margin-top: 44px;
		padding-bottom: 80px;
		
		.comment-list {
			.comment-item {
				background: #fff;
				padding: 16px;
				margin-bottom: 12px;
				
				.comment-header {
					display: flex;
					align-items: center;
					margin-bottom: 12px;
					
					.user-avatar {
						width: 40px;
						height: 40px;
						border-radius: 50%;
						margin-right: 12px;
					}
					
					.user-info {
						flex: 1;
						
						.user-name {
							font-size: 15px;
							font-weight: 500;
							color: #333;
							display: block;
							margin-bottom: 4px;
						}
					}
					
					.comment-time {
						font-size: 12px;
						color: #999;
					}
				}
				
				.comment-content {
					margin-bottom: 12px;
					
					.content-text {
						font-size: 15px;
						line-height: 1.6;
						color: #333;
					}
				}
				
				.comment-images {
					display: flex;
					flex-wrap: wrap;
					gap: 8px;
					margin-bottom: 12px;
					
					.comment-image {
						width: 100px;
						height: 100px;
						border-radius: 8px;
					}
				}
				
				.reply-list {
					background: #F7F7F7;
					padding: 12px;
					border-radius: 8px;
					margin-bottom: 12px;
					
					.reply-item {
						font-size: 14px;
						line-height: 1.6;
						color: #666;
						margin-bottom: 8px;
						
						&:last-child {
							margin-bottom: 0;
						}
						
						.reply-author {
							color: #1890FF;
							font-weight: 500;
						}
					}
				}
				
				.comment-actions {
					display: flex;
					gap: 24px;
					
					.action-item {
						display: flex;
						align-items: center;
						gap: 4px;
						
						.action-text {
							font-size: 13px;
							color: #999;
						}
					}
				}
			}
		}
		
		.empty-comment {
			text-align: center;
			padding: 60px 0;
			color: #999;
			font-size: 14px;
		}
	}
	
	.reply-input-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid #EEEEEE;
		padding: 8px 16px;
		padding-bottom: calc(8px + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		gap: 12px;
		z-index: 100;
		
		.reply-input {
			flex: 1;
			height: 36px;
			background: #F5F5F5;
			border-radius: 18px;
			padding: 0 16px;
			font-size: 14px;
		}
		
		.send-btn {
			padding: 0 20px;
			height: 36px;
			line-height: 36px;
			background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
			border-radius: 18px;
			font-size: 14px;
			font-weight: 600;
			color: #fff;
			border: none;
			
			&:active {
				opacity: 0.8;
			}
		}
	}
}
</style>
